<template>
  <div class="app-container">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>会员设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box" style="width: 100%;">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="会员名称">
              <el-input v-model="form.name" placeholder="创建会员平台名称" style="width: 400px;"></el-input>
          </el-form-item>
          <el-form-item label="会员卡颜色" >
              <el-input v-model="form.name" placeholder="输入会员卡底色色值" style="width: 400px;"></el-input>
          </el-form-item>
          <el-form-item label="会员卡LOGO" >
            <div class="crop-demo">
              <img :src="cropImg" class="pre-img">
              <div class="crop-demo-btn">选择图片
                <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
              </div>
            </div>
          </el-form-item>
          <el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%">
            <vue-cropper ref='cropper' :src="imgSrc" :ready="cropImage" :zoom="cropImage" :cropmove="cropImage" style="width:100%;height:300px;"></vue-cropper>
            <span slot="footer" class="dialog-footer">
              <el-button @click="cancelCrop">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
          
          <div class="fenge"></div>
          <el-form-item label="会员量" >
              <el-input v-model="form.name" placeholder="输入会员最大购买量" style="width: 400px;"></el-input>
              <div class="tishi">已被购买： 0  个&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 剩余可购买： 0   个</div>
          </el-form-item>
          <el-form-item label="会员价">
              <el-radio-group v-model="form.resource">
                  <el-radio label="折扣比例(折)" style="width: 140px;"></el-radio>
                  <el-input v-model="form.name" style="width: 260px;"></el-input>
                  <br />
                  <div style="height: 22px;"></div>
                  <el-radio label="实际减扣金额(元)" style="width: 140px;"></el-radio>
                  <el-input v-model="form.name" style="width: 260px;"></el-input>
              </el-radio-group>
          </el-form-item>

          <div class="fenge"></div>
          <el-form-item label="会员提示" >
              <el-input type="text" placeholder="会员服务提示" style="width: 400px;" maxlength="10" show-word-limit></el-input>
              <div class="tishi">15个汉字以内</div>
          </el-form-item>
          <el-form-item label="特权说明" >
              <el-input type="textarea" placeholder="特权权益说明" :autosize="{ minRows: 2}" style="width: 400px;" maxlength="1024" show-word-limit></el-input>
              <div class="tishi">1024个汉字以内</div>
          </el-form-item>
          <el-form-item label="使用须知" >
              <el-input type="textarea" placeholder="使用说明" :autosize="{ minRows: 2}" style="width: 400px;" maxlength="1024" show-word-limit></el-input>
              <div class="tishi">1024个汉字以内</div>
          </el-form-item>
          <div class="fenge"></div>
          <el-form-item>
              <el-button type="danger" @click="onSubmit" style="width: 150px;">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  import VueCropper from 'vue-cropperjs'
  export default {
    name: 'member',
    data: function() {
      return {
        form: {
          text: '',
          name: '',
          delivery: true,
          resource: '折扣比例1'
        },
        defaultSrc: './static/img/img.jpg',
        fileList: [],
        imgSrc: '',
        cropImg: '',
        dialogVisible: false
      }
    },
    components: {
      VueCropper
    },
    methods: {
      onSubmit() {
        this.$message.success('提交成功！')
      },
      setImage(e) {
        const file = e.target.files[0]
        if (!file.type.includes('image/')) {
          return
        }
        const reader = new FileReader()
        reader.onload = (event) => {
          this.dialogVisible = true
          this.imgSrc = event.target.result
          this.$refs.cropper && this.$refs.cropper.replace(event.target.result)
        }
        reader.readAsDataURL(file)
      },
      cropImage() {
        this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL()
      },
      cancelCrop() {
        this.dialogVisible = false
        this.cropImg = this.defaultSrc
      },
      imageuploaded(res) {
        console.log(res)
      },
      handleError() {
        this.$notify.error({
          title: '上传失败',
          message: '图片上传接口上传失败，可更改为自己的服务器接口'
        })
      }
    },
    created() {
      this.cropImg = this.defaultSrc
    }
  }
</script>

<style scoped>
  .content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
  }

  .pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
  }

  .crop-demo {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
  }

  .crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
  }

  .crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
  }
  .fenge{
    width: 100%;
    height: 1px;
    background-color: #f4f4f4;
    margin: 30px 0;
  }
  .tishi{
    color: #888;
    display: initial;
    margin-left: 30px;
  }
</style>
